// .search_dialog_content {
//   position: absolute;
//   right: 0;
//   top: 0;
//   & > img {
//     width: 160px;
//   }
//   .search_tip {
//     color: #fff;
//     font-size: 24px;
//     text-align: right;
//     position: relative;
//     right: 40px;
//   }
// }
// .more-votes-content {
//   width: 100%;
//   padding: 72px 0px 48px 40px;
//   background-color: #fff;
//   border-radius: 16px 16px 0px 0px;
//   position: absolute;
//   left: 0;
//   bottom: 0;
//   transition: all 0.8s;
//   transform: translateY(100%);
//   &.hide {
//     transform: translateY(100%);
//   }
//   &.show {
//     transform: translateY(0);
//   }

//   .item {
//     & > img {
//       width: 100px;
//       height: 100px;
//       margin-right: 24px;
//     }
//     &:last-child .item-right {
//       border-bottom: none;
//     }
//     .item-right {
//       height: 148px;
//       border-bottom: 1px solid #efefef;
//       padding-right: 40px;

//       .item-label {
//         width: 313px;
//         font-size: 30px;
//         font-family: AlibabaPuHuiTiR;
//         color: #333333;
//         line-height: 42px;
//       }
//       .item-button {
//         width: 136px;
//         height: 60px;
//         background: #ff9742;
//         border-radius: 30px;
//         font-size: 28px;
//         font-family: AlibabaPuHuiTiR;
//         color: #ffffff;
//         line-height: 60px;
//         text-align: center;
//       }
//     }
//   }
// }
// .blessing_dialog_content {
//   position: absolute;
//   left: 50%;
//   top: 50%;
//   transform: translate(-50%, -50%);

//   .textarea {
//     position: relative;
//     width: 528px;
//     height: 434px;
//     background-image: url("~@/assets/img/mask_content.png");
//     background-size: cover;
//     .title {
//       font-size: 40px;
//       font-family: AlibabaPuHuiTiM;
//       color: #ffffff;
//       line-height: 30px;
//       text-align: center;
//       padding-top: 38px;
//     }
//     padding: 0 30px;

//     textarea {
//       width: 469px;
//       height: 94px;
//       font-size: 28px;
//       font-family: AlibabaPuHuiTiR;
//       color: #333333;
//       line-height: 47px;
//       background-color: transparent;
//       border: none;
//       margin-top: 56px;
//       &::-webkit-input-placeholder {
//         color: #999999;
//       }
//       &::-ms-input-placeholder {
//         color: #999999;
//       }
//       &::-moz-placeholder {
//         color: #999999;
//       }
//     }

//     .change_blessing {
//       position: absolute;
//       right: 45px;
//       bottom: 96px;
//       & > img {
//         width: 28px;
//         height: 28px;
//         display: block;
//         margin-right: 8px;
//       }
//       & > span {
//         font-size: 24px;
//         font-family: AlibabaPuHuiTiR;
//         color: #999999;
//         line-height: 24px;
//       }
//     }
//   }
//   .btn {
//     width: 308px;
//     height: 80px;
//     background: linear-gradient(180deg, #ffad13 0%, #fd7508 100%);
//     border-radius: 40px;
//     font-size: 34px;
//     font-family: AlibabaPuHuiTiM;
//     color: #ffffff;
//     line-height: 80px;
//     text-align: center;
//     margin: 0 auto;
//     margin-top: 16px;
//   }
//   .close {
//     width: 48px;
//     height: 48px;
//     background-image: url("~@/assets/img/mask_close.png");
//     background-size: cover;
//     margin: 0 auto;
//     margin-top: 63px;
//   }
// }

.page_my_love {
  min-height: 100vh;
  background-image: url("~@/assets/img/share_bg.png");
  background-size: 100%;
  background-color: #ffe4ce;
  background-repeat: no-repeat;
  padding: 20px 32px 188px 32px;

  .my_love_title_img {
    background-image: url("~@/assets/img/upload_title_bg.png");
    width: 529px;
    height: 200px;
    margin: 0 auto;
    background-size: 100% 100%;
    position: relative;
    z-index: 2;
  }
  .my_love_container {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #000000;
    padding-top: 63px;
    margin-top: -25px;
    .my_love_head_box {
      width: 587px;
      height: 141px;
      background-image: url("~@/assets/img/mine_bg.png");
      background-size: 100% 100%;
      margin: 0 auto;
      .my_love_head {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        margin: 0 auto;
        margin-top: -10.5px;
      }
    }
    .my_love_user_name {
      font-size: 30px;
      font-family: AlibabaPuHuiTiR;
      color: #666666;
      line-height: 30px;
      margin-top: 34px;
      text-align: center;
      & > span {
        margin: 0 10px;
      }
    }
    // .my_love_data_box {
    //   margin-top: 50px;
    //   padding: 0 35px;
    //   .my_love_data {
    //     text-align: center;
    //     .my_love_data_num {
    //       font-size: 40px;
    //       font-family: AlibabaPuHuiTiM;
    //       color: #333333;
    //       line-height: 30px;
    //       margin-bottom: 12px;
    //     }
    //     .my_love_data_label {
    //       font-size: 24px;
    //       font-family: AlibabaPuHuiTiR;
    //       color: #999999;
    //       line-height: 30px;
    //     }
    //   }
    // }
    .my_love_red_page_container {
      width: 638px;
      background: #fff6ee;
      border-radius: 10px;
      border: 1px solid #000000;
      margin: 0 auto;
      position: relative;
      padding-top: 67px;
      margin-top: 90px;
      .my_love_red_page_countdown {
        width: 485px;
        height: 76px;
        background-image: url("~@/assets/img/win_4.png");
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        margin-left: -242.5px;
        top: -38px;
        & > img {
          width: 257px;
        }
        .countdown_box {
          font-size: 26px;
          .time {
            background-color: #492105;
            color: #e0d298;
            font-size: 24px;
            padding: 4px;
            margin-left: 4px;
          }
        }
      }
      .my_love_red_page_in_last_type {
        width: 445px;
        height: 62px;
        background-image: url("~@/assets/img/mine_2.png");
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        margin-left: -222.5px;
        top: -31px;
        & > img {
          width: 148px;
          margin: 0 34px;
        }
        & > span {
          font-size: 30px;
          font-family: AlibabaPuHuiTiR;
          color: #492105;
        }
      }
      .red_page_box {
        padding: 0 16px;
        padding-bottom: 132px;
        overflow-x: auto;
        white-space: nowrap;
        .red_page_item {
          width: 25%;
          text-align: center;
          display: inline-block;
          .red_page_surplus {
            font-size: 20px;
            font-family: AlibabaPuHuiTiR;
            color: rgba(87, 16, 13, 0.65);
            line-height: 27px;
            margin-bottom: 15px;
          }
          .btn_prize_list {
            width: 118px;
            height: 40px;
            border-radius: 20px;
            border: 1px solid #f2362f;
            font-size: 22px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #f2362f;
            line-height: 40px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 10px;
          }
          .need_num {
            font-size: 20px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #666666;
            line-height: 30px;
            margin-bottom: 21px;
          }
          .red_page_img {
            height: 90px;
            position: relative;
            img {
              height: 90px;
              display: block;
              margin: 0 auto;
            }
            .round {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              position: absolute;
              bottom: -26px;
              left: 50%;
              transform: translateX(-50%);
              background-color: #ffa65d;
              z-index: 3;
              &.select {
                background-color: #f2362f;
              }
            }
          }
        }
        .line {
          height: 12px;
          border-radius: 6px;
          background-color: #ffd39c;
          position: relative;
          margin-top: 11px;
          .red_line {
            position: absolute;
            z-index: 2;
            height: 12px;
            left: 0;
            top: 0;
            background-color: #f2362f;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
          }
        }
        .red_page_type {
          font-size: 22px;
          font-family: AlibabaPuHuiTiR;
          color: #f2362f;
          line-height: 30px;
          text-align: center;
          margin-top: 9px;
          .last_red_page_type {
            width: 25%;
          }
        }
        .next_red_page_tip {
          font-size: 24px;
          font-family: AlibabaPuHuiTiR;
          color: #f2362f;
          line-height: 33px;
          text-align: center;
          margin-top: 30px;
        }
        .total_red_page_box {
          width: 634px;
          margin: 0 auto;
          height: 90px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: #ffcba3;
          border-radius: 0px 0px 10px 10px;
          padding: 0 32px;
          & > p {
            font-size: 24px;
            font-family: AlibabaPuHuiTiR;
            color: rgba(87, 16, 13, 0.65);
            line-height: 33px;
            span {
              font-size: 32px;
              color: #f2362f;
            }
          }
          .btn {
            width: 121px;
            height: 56px;
            background: #f2362f;
            text-align: center;
            line-height: 56px;
            border-radius: 28px;

            font-size: 26px;
            font-family: AlibabaPuHuiTiR;
            color: #ffffff;
          }
        }
      }
    }

    .other_user_photo_box {
      width: 628px;
      height: 750px;
      background-color: #ff7c77;
      margin: 0 auto;
      border: 2px solid #000;
      position: relative;
      .other_user_photo_item {
        width: 100%;
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0px;
        top: 0px;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.8s;
        &.select {
          opacity: 1;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border: 2px solid #000;
        }
      }
      .indicator_box {
        list-style: none;
        position: absolute;
        left: 50%;
        bottom: 50px;
        transform: translateX(-50%);
        margin-left: 20px;
        .indicator {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #fff;
          margin-right: 20px;
          &.select {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
    .other_user_declaration {
      width: 562px;
      font-size: 28px;
      font-family: Helvetica;
      color: #333333;
      line-height: 38px;
      margin: 0 auto;
      margin-top: 30px;
      margin-bottom: 40px;
    }
    .other_user_dashed {
      width: 466px;
      height: 2px;
      background: linear-gradient(to right, #999, #999 3.75px, transparent 3.75px, transparent);
      background-size: 5px 100%;
      margin: 0px auto;
      position: relative;
      &::before,
      &::after {
        width: 6px;
        height: 6px;
        content: "";
        border-radius: 50%;
        border: 1px solid #666;
        position: absolute;
        top: -3px;
      }
      &::before {
        left: -7px;
      }
      &::after {
        right: -7px;
      }
    }
    .other_user_name {
      font-size: 32px;
      font-family: Helvetica;
      color: #df4042;
      line-height: 30px;
      text-align: center;
      margin-top: 48px;
      margin-bottom: 30px;
    }
    .other_user_id {
      margin: 0 auto;
      width: 162px;
      line-height: 30px;
      border-radius: 16px;
      border: 1px solid #df4042;
      font-size: 22px;
      font-family: Helvetica;
      color: #df4042;
      text-align: center;
    }
    // .other_user_data_box {
    //   margin: 28px 0;
    // }
    .other_user_view_btn_box {
      position: fixed;
      right: 18px;
      top: 670px;
      .other_user_view_btn {
        width: 88px;
        height: 100px;
        background-size: 100% 100%;
        &.search {
          background-image: url("~@/assets/img/share.png");
          margin-bottom: 60px;
        }
        &.like {
          background-image: url("~@/assets/img/add.png");
        }
      }
    }
  }
  .like_list_container {
    padding: 33px 30px;
    margin-top: 40px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #000000;
    .tab_list {
      .tab {
        font-size: 28px;
        font-family: AlibabaPuHuiTiR;
        color: rgba(87, 16, 13, 0.65);
        line-height: 32px;
        transition: color 0.8s;
        &::before {
          width: 0;
          height: 5px;
          content: "";
          background: transparent;
          position: absolute;
          left: 50%;
          bottom: -14px;
          transform: translateX(-50%);
          transition: width 0.8s;
        }
        &.select {
          font-size: 32px;
          font-family: AlibabaPuHuiTiM;
          color: #57100d;
          line-height: 32px;
          position: relative;
          &::before {
            width: 59px;
            background: #f78c06;
          }
        }
      }
    }
    .like_me_list,
    .my_like_list {
      min-height: 200px;
      .no_more {
        text-align: center;
        line-height: 200px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .list-item {
        padding: 20px 30px;
        & > img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          margin-right: 20px;
        }
        .list-item-right {
          padding: 28px 0;
          border-bottom: 1px solid #f3f3f3;
          .phone {
            font-size: 28px;
            font-family: AlibabaPuHuiTiR;
            color: #333333;
            line-height: 28px;
          }
          .comment {
            font-size: 20px;
            font-family: AlibabaPuHuiTiR;
            color: #333333;
            line-height: 28px;
            margin-top: 8px;
          }
          .btn {
            text-align: center;
            font-size: 28px;
            font-family: AlibabaPuHuiTiR;
            color: #f2362f;
            line-height: 48px;
            width: 130px;
            height: 48px;
            border-radius: 24px;
            border: 2px solid #f2362f;
            margin-left: 33px;
          }
        }
      }
    }
  }
  .bottom_btn_box {
    width: 100%;
    height: 145px;
    background: #ffe4ce;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 0 40px;
    .btn_go_home {
      width: 192px;
      height: 88px;
      border-radius: 44px;
      background: linear-gradient(360deg, #f2362f 0%, #ff5b55 100%);
      border-radius: 44px;
      font-size: 34px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
      line-height: 88px;
      text-align: center;
    }
    .btn_search {
      width: 447px;
      height: 88px;
      background: linear-gradient(180deg, #ffad13 0%, #fd7508 100%);
      border-radius: 44px;
      font-size: 34px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
      line-height: 88px;
      text-align: center;
      position: relative;
      .like {
        font-size: 30px;
        font-family: Helvetica;
        color: #f33932;
        line-height: 42px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        &.show {
          animation: show 1.2s;
        }
        &.hide {
          transform: translate(-50%, -50%);
          opacity: 0;
        }
        @keyframes show {
          0% {
            transform: translate(-50%, -50%);
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: translate(-50%, -300%);
          }
        }
        img {
          width: 48px;
          height: 48px;
        }
      }
    }
  }
}
